<template>
  <view class="uni-common-mt">
    <!-- <view class="uni-form-item uni-column"> -->
    <!-- <view class="title">可自动聚焦的input</view> -->
    <!--      <input class="uni-input" focus placeholder="请输入地址寻找附近的网点" /> -->
    <!-- </view> -->
    <view class="search-box">
      <uni-search-bar @input="input" :radius="100" cancelButton="none" placeholder="请输入地址寻找附近的网点"></uni-search-bar>
    </view>
  </view>
  <view class="content">
    <view style="margin-top: 6rpx;margin-left: 16rpx;margin-bottom: 16rpx; color: red;">
      当前定位： {{location.address}}
    </view>
    <view class="page-body">
      <view class="page-section page-section-gap">
        <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
        </map>
      </view>
      <!--  <view>
        <map name="" latitude="28.68202" longitude="115.85794"></map>
      </view> -->
    </view>

    <!-- 搜索定位 -->
    <!--绑定输入事件-->
    <input style="border:1px solid black;" @input="getsuggest" value="{{backfill}}" />
    <!--关键词输入提示列表渲染 wx:for="{{suggestion}}" wx:key="index"-->

  </view>
</template>
<script>
  // import QQMapWX from "@/store/qqmap-wx-jssdk.js"
  const QQMapWX = require('../../static/qqmap-wx-jssdk.js')

  export default {
    data() {
      return {
        title: 'input',
        focus: false,
        inputValue: '',
        showClearIcon: false,
        inputClearValue: '',
        changeValue: '',
        showPassword: true,
        lat: '',
        lng: '',
        id: 0, // 使用 marker点击事件 需要填写id
        title: 'map',
        latitude: 28.68202,
        longitude: 115.85794,
        // province: '',
        // city: '',
        // area: '',
        location: {},
        kw: '', //input输入的地址
        timer: null,
        covers: [{
            id: 1,
            latitude: 28.68202,
            longitude: 115.85794,
            iconPath: '/static/location1.png',
            width: 28,
            height: 28,
            title: '你在这儿', //标注点名
            alpha: 0.5, //透明
          },
          // {
          //   // id: 0,
          //   latitude: 39.90,
          //   longitude: 116.39,
          //   iconPath: '@/static/location2.png'
          //   '
          // }
        ]
      }
    },
    async onLoad() {
      const that = this
      uni.authorize({
        scope: 'scope.userLocation',
        success() {
          uni.getLocation({
            type: 'gcj02',
            // type: 'wgs84',
            geocode: true,
            isHighAccuracy: true,
            success: function(res) {
              console.log(res)
              console.log('当前位置的经度longitude：' + res.longitude);
              console.log('当前位置的纬度latitude：' + res.latitude);
              that.latitude = res.latitude
              that.longitude = res.longitude
              console.log('that.covers' + that.covers.length)
              for (let i = 0; i < that.covers.length; i++) {
                console.log(i)
                // console.log('that.covers[i]' + that.covers[0].latitude)
                that.covers[i].latitude = res.latitude
                console.log(that.covers[i].latitude)
                // that.covers[i].id = i + 1
                console.log(that.covers[i].id)
                that.covers[i].longitude = res.longitude
              }
              // 腾讯地图 API
              const qqmapsdk = new QQMapWX({
                key: 'SGJBZ-NHO3Q-JGC52-4D2RG-CJ7KH-DYFXF'
              })
              qqmapsdk.reverseGeocoder({
                location, //默认当前地址
                success(response) {
                  let info = response.result
                  console.log(info)
                  console.log(that.location)
                  that.location.province = info.address_component.province
                  that.location.city = info.address_component.city
                  that.location.area = info.address_component.district
                  that.location.street = info.address_component.street
                  that.location.address = info.address
                  console.log(that.location)
                }
              })
            },
            fail(err) {
              console.log(err)
            }
          })

        }
      })
      // backfill(e) {
      //   var id = e.currentTarget.id;
      //   for (var i = 0; i < this.data.suggestion.length; i++) {
      //     if (i == id) {
      //       this.setData({
      //         backfill: this.data.suggestion[i].title
      //       });
      //     }
      //   }
      // },


    },
    methods: {
      input(e) {
        // console.log(e)
        // let _this = this
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.kw = e
          // console.log(e.value)
          this.getSearchList()
        }, 500)
      },
      async getSearchList() {
        if (this.kw.length === 0) {
          return
        }
        // 开启地址搜索
        console.log(this.kw)
      },
      getsuggest(e) {
        var _this = this
        //调用关键词提示接口
        qqmapsdk.getSuggestion({
          //获取输入框值并设置keyword参数
          keyword: e.detail.value, //用户输入的关键词，可设置固定值,如keyword:'KFC'
          //region:'北京', //设置城市名，限制关键词所示的地域范围，非必填参数
          success: function(res) { //搜索成功后的回调
            console.log(res);
            var sug = [];
            for (var i = 0; i < res.data.length; i++) {
              sug.push({ // 获取返回结果，放到sug数组中
                title: res.data[i].title,
                id: res.data[i].id,
                addr: res.data[i].address,
                city: res.data[i].city,
                district: res.data[i].district,
                latitude: res.data[i].location.lat,
                longitude: res.data[i].location.lng
              });
            }
            _this.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
              suggestion: sug
            });
          },
          fail: function(error) {
            console.error(error);
          },
          complete: function(res) {
            console.log(res);
          }
        });
      }
    }
  }
</script>
<style lang="scss">
  .map {
    width: 100%;
    height: 100%;
  }

  .search-box {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .sugg-list {
    padding: 0 5px;

    .sugg-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      padding: 13px 0;
      border-bottom: 1px solid #efefef;

      .goods-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 3px;
      }
    }
  }

  .history-box {
    padding: 0 5px;

    .history-title {
      display: flex;
      justify-content: space-between;
      height: 40px;
      align-items: center;
      font-size: 13px;
      border-bottom: 1px solid #efefef;
    }

    .history-list {
      display: flex;
      flex-wrap: wrap;

      .uni-tag {
        margin-top: 5px;
        margin-right: 5px;
      }
    }
  }
</style>